<template>
  <div class="order-detail-container">
    <van-nav-bar
      class="app-nav-bar"
      title="订单明细"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <!--待支付-->
    <div v-if="orderInfo.orderStatus==0" class="top-wrapper wait-pay">
      <van-row class="top-row-wrapper">
        <van-col span="6" class="order-status">提交成功</van-col>
        <van-col span="9" offset="9">
          <span class="fs14">剩余：</span> <span class="fs18">{{timerText}}</span>
        </van-col>
      </van-row>
      <div class="fs16 mgt8">预约成功</div>
      <div class="fs14 mgt8">号源已为您锁定，请在5分钟内完成支付</div>
    </div>
    <div v-if="orderInfo.orderStatus==1" class="top-wrapper wait-pay">
      <van-row class="top-row-wrapper">
        <van-col span="7" class="order-status">系统已取消</van-col>
      </van-row>
      <div class="fs16 mgt8">已退款</div>
      <div class="fs14 mgt8">超时未支付</div>
    </div>
    <!--已支付-->
    <div v-if="orderInfo.orderStatus==2" class="top-wrapper wait-pay">
      <van-row class="top-row-wrapper">
        <van-col span="7" class="order-status">预约成功</van-col>
      </van-row>
      <div class="fs16 mgt8">已支付</div>
      <div class="fs14 mgt8">请准时于就诊当天前往医院门诊</div>
    </div>
    <!--已支付-->
    <div v-if="orderInfo.orderStatus==3" class="top-wrapper wait-pay">
      <van-row class="top-row-wrapper">
        <van-col span="7" class="order-status">患者已取消</van-col>
      </van-row>
      <div class="fs16 mgt8">已退款</div>
    </div>
    <!--就诊完成-->
    <div v-if="orderInfo.orderStatus==4" class="top-wrapper wait-pay">
      <van-row class="top-row-wrapper">
        <van-col span="7" class="order-status">就诊已结束</van-col>
      </van-row>
    </div>

    <div class="middle-wrapper" v-if="orderInfo?.params" >
      <van-cell-group inset>
        <div class="date-wrapper">
          {{orderInfo.params.workTime}}
        </div>
        <van-row class="hosp-wrapper">
          <van-col span="6">就诊医院</van-col>
          <van-col span="10" class="hosp-name">中心医院</van-col>
        </van-row>
        <van-row class="hosp-wrapper">
          <van-col span="6">就诊科室</van-col>
          <van-col span="10" >{{orderInfo.params.depname}}（门诊）</van-col>
        </van-row>
        <van-row class="hosp-wrapper">
          <van-col span="6">就诊医生</van-col>
          <van-col span="10" >{{orderInfo.params.docname}} {{orderInfo.params.professionalTitle}}</van-col>
        </van-row>
        <van-row class="hosp-wrapper">
          <van-col span="6">门诊类型</van-col>
          <van-col span="10" ><span>{{orderInfo.params.professionalTitle}}号 </span><span class="order-price">{{orderInfo.amount}}元</span></van-col>
        </van-row>
        <van-divider />
        <van-row class="hosp-wrapper">
          <van-col span="6">就诊人</van-col>
          <van-col span="10">{{orderInfo.params.patientName}}</van-col>
        </van-row>
        <van-row class="hosp-wrapper">
          <van-col span="6">就诊卡号</van-col>
          <van-col span="10" >{{orderInfo.cardNo}}</van-col>
        </van-row>
      </van-cell-group>
    </div>

    <div class="bottom-wrapper">
      <van-cell-group inset>
        <van-row class="order-wrapper">
          <van-col span="6">订单编号</van-col>
          <van-col span="10" class="van-ellipsis">{{orderInfo.id}}</van-col>
        </van-row>
        <van-row class="order-wrapper">
          <van-col span="6">支付金额</van-col>
        </van-row>
        <van-row class="order-wrapper">
          <van-col span="20"></van-col>
          <van-col span="4" class="order-price">12元</van-col>
        </van-row>
        <div class="comment-btn" v-if="orderInfo.orderStatus==4">
          <van-button type="info" size="small" @click="commentShow=true">立即评价</van-button>
        </div>
      </van-cell-group>
    </div>

    <div class="btn-wrapper">
      <div class="pay-btn" v-if="orderInfo.orderStatus==0" @click="clickPayBtn">立即支付</div>
      <div class="cancel-btn"v-if="orderInfo.orderStatus==0||orderInfo.orderStatus==2" @click="clickCancelBtn">取消订单</div>
    </div>

    <div class="inform">
      <div class="question">为什么有些订单会出现支付倒计时?</div>
      <div class="answer">答：部分医院要求预约时必须支付挂费号，所以您需要在相应的时间内完成支付，否则预约订单将会自动取消。</div>
    </div>

    <van-popup v-model="show" class="cancel-wrapper">
      <van-form @submit="onCancel">
        <van-radio-group v-model="cancelReason" direction="horizontal">
          <van-radio name="选错科室">选错科室</van-radio>
          <van-radio name="选错医生">选错医生</van-radio>
          <van-radio name="临时有事">临时有事</van-radio>
          <van-radio name="病情变化">病情变化</van-radio>
        </van-radio-group>
        <div>其他原因</div>
        <van-field
          style="border: gray 1px"
          v-model="cancelReasonText"
          @input="changeReason"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>

    <!--评价-->
    <van-popup class="van-popup-comment" v-model="commentShow" position="bottom" :style="{ height: '50%' }">
      <div class="tip-wrapper">
        请对您提供就诊服务的医生评价
      </div>
      <van-form class="comment-form-wrapper" @submit="handleComment">
        <van-field name="rate" label="服务态度" label-align="right" colon>
          <template #input>
            <van-rate v-model="comment.attitude" />
          </template>
        </van-field>
        <van-field name="rate" label="服务质量" label-align="right" colon>
          <template #input>
            <van-rate v-model="comment.quanlity" />
          </template>
        </van-field>
        <van-field name="rate" label="服务效果" label-align="right" colon>
          <template #input>
            <van-rate v-model="comment.effect" />
          </template>
        </van-field>
        <van-field name="rate" label="满意程度" label-align="right" colon>
          <template #input>
            <van-rate v-model="comment.degree" />
          </template>
        </van-field>
        <van-field
          v-model="comment.content"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="我有其他想说的...."
          show-word-limit
        />
        <div>
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import orderInfoApi from "@/api/orderInfo";
import commentApi from '@/api/comment'
export default {
  name: "OrderDetailIndex",
  data(){
    return{
      cancelReason:'',
      cancelReasonText:'',
      show:false,
      commentShow:false,
      comment:{},
      orderInfo:{},
      time:null,
      timer:null,
      timerText:''
    }
  },
  created() {
    this.init()
  },
  mounted() {

  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods:{
    async init(){
      const orderInfoId = this.$route.query.orderInfoId
      const {data:res} = await orderInfoApi.findById(orderInfoId)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.orderInfo = res.data
      if (this.orderInfo.orderStatus==0){
        this.time = this.orderInfo.params.timeout
        this.timer = setInterval(this.launchTimer,1000)
      }
    },
    getHMS(time) {
      const min = parseInt(time % 3600 / 60) < 10 ? '0' + parseInt(time % 3600 / 60) : parseInt(time % 3600 / 60)
      const sec = parseInt(time % 3600 % 60) < 10 ? '0' + parseInt(time % 3600 % 60) : parseInt(time % 3600 % 60)
      return min + '分' + sec+ '秒'
    },
    launchTimer(){
      this.time--
      this.timerText = this.getHMS(this.time)
      if (this.time==0){
        clearInterval(this.timer);
        this.$router.go(0)
      }
    },
    async clickPayBtn(){
      const{data:res} = await orderInfoApi.pay(this.orderInfo.id)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'支付失败'})
      }
      //刷新页面
      this.$router.go(0)
    },
    clickCancelBtn(){
      this.show = true
    },
    async onCancel(){
      const{data:res} = await orderInfoApi.cancel(this.orderInfo.id,this.cancelReason)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'订单取消失败'})
      }
      //刷新页面
      this.$router.go(0)
    },
    changeReason(val){
      this.cancelReason=val
    },
    async handleComment(){
      //todo 判空

      this.comment.orderInfoId = this.orderInfo.id
      this.comment.cardNo = this.orderInfo.cardNo

      const{data:res} = await commentApi.add(this.comment)
      if (res.data==true){
        this.commentShow = false
        this.$notify({type:'success',message:'评论成功'})
        const timer = setInterval(()=>{
          clearTimeout(timer)
          this.$router.go(0)
        },2000)
      }else {
        this.commentShow = false
        return this.$notify({type:'danger',message:'您已重复评论'})
      }
    }
  }
}
</script>

<style lang="less" scoped>
.order-detail-container{
  .top-wrapper{
    background-color: rgb(65,136,254);
    color: white;
    padding: 15px 10px 20px 10px;
    margin-bottom: 10px;
    .top-row-wrapper{
      .order-status{
        font-size: 20px;
      }
    }
  }
  .middle-wrapper{
    .date-wrapper{
      font-weight: bold;
      font-size: 22px;
      text-align: center;
      margin-bottom: 12px;
    }
    .hosp-wrapper{
      font-size: 16px;
      margin-top: 10px;
      .hosp-name,.order-price{
        color: rgb(241, 55, 48);
      }
    }
  }
  .bottom-wrapper{
    margin-top: 10px;
    .order-wrapper{
      font-size: 16px;
      margin-top: 12px;
      .order-price{
        color: rgb(241, 55, 48);
      }
    }
    .comment-btn{
      margin-top: 5px;
      margin-right: 5px;
      text-align: right;
    }
  }
  .btn-wrapper{
    margin-top: 10px;

    .pay-btn{
      background-color: #3296fa;
      color: white;
      font-size: 20px;
      line-height: 40px;
      text-align: center;
      margin-bottom: 12px;
    }
    .cancel-btn{
      font-size: 20px;
      line-height: 40px;
      color: rgb(241, 55, 48);
      text-align: center;
      background-color: white;
    }
  }
  .inform{
    margin-top: 10px;
    font-size: 14px;
    .answer{
      margin-top: 5px;
      color: gray;
    }
  }
  .cancel-wrapper{
    font-size: 16px;
    width: 300px;
  }

  .van-popup-comment{
    .tip-wrapper{
      margin-top: 20px;
      text-align: center;
      font-size: 17px;
    }
    .comment-form-wrapper{
      text-align: center;
    }
  }
}
</style>
